<template>
  <div>
    {{user.userinfo.company}}
    <button @click="update">update</button>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, shallowReactive, triggerRef } from 'vue'
const user = shallowRef({
  userinfo: {
    company: 'itcast'
  }
})

const update = (e: MouseEvent) => {
  console.log((e.target as HTMLButtonElement).innerHTML)
  user.value.userinfo.company = '黑马'

  triggerRef(user)
  // user.value = {
  //   userinfo: {
  //     company: '黑马'
  //   }
  // }
}
</script>

<style scoped>

</style>
